<template>
     <!-- 单位信息页面的容器 -->
     <div class="header_information page-container">
        
        <!-- 头部 -->
        <el-row class="header_name">
            <el-col :span="24" class="header_text">
                <h1>单位信息</h1>
            </el-col>
            <el-col :span="24">
                <div class="header_line"></div>
            </el-col>
        </el-row>
        <!-- 根据审核状态显示不同的提示信息 -->
        <div class="el_alert">
            <el-alert title="恭喜，您的学校认证信息已经通过审核！" type="success" v-if="i_data.auditStatus == 1" />
            <el-alert title="您的学校认证信息待审中" type="warning" v-if="i_data.auditStatus == 0" />
            <el-alert title="您的学校认证信息审核拒绝，可修改信息后点击重新提交按钮，再次提交审核。" type="error" :closable="false"
                v-if="i_data.auditStatus == 2" />
        </div>
        <!-- 表格内容区域 -->
        <el-row>
            <!-- 组委会信息 -->
            <el-col :span="24">
                <h3 class="contnet_text">学校信息</h3>
                <!-- 学校信息表单 -->
                <el-form label-width="100px" v-if="i_data" ref="i_data_ref" :model="i_data" :rules="i_data_rules">
                    <el-form-item label="学校 ID">
                        <span class="not_inp">{{ i_data.userId }}</span>
                        <!-- 显示数据 -->
                    </el-form-item>

                    <el-form-item label="单位名称" prop="name">
                        <el-input v-model="i_data.name" placeholder="请填写单位名称" class="content_input"
                            :disabled="i_data.auditStatus == 0" v-model.trim="inputValueTrim" />
                    </el-form-item>
                    <el-form-item label="学校性质">
                        <div class="select_region">
                            <el-select placeholder="请选择单位性质" clearable class="content_select" disabled
                                v-model="i_data.schoolNature">
                                <el-option v-for="item in type_data" :key="item.value" :value="item.value"
                                    :label="item.label"></el-option>
                            </el-select>
                        </div>
                    </el-form-item>

                    <el-form-item label="所在地区" prop="county">
                        <div class="select_region">
                            <ProvinceSelect v-model:economize="i_data.economize" v-model:market="i_data.market"
                                v-model:county="i_data.county" :showCounty="true" :disabled="i_data.auditStatus != 2" />
                        </div>
                    </el-form-item>

                    <div class="select_region">
                        <el-form-item label="邮寄地址" prop="address">
                            <el-input v-model="i_data.address" placeholder="请填写机构邮寄地址" class="content_input"
                                v-model.trim="inputValueTrim" :disabled="i_data.auditStatus == 0" />
                        </el-form-item>
                    </div>
                    <!-- TODO 信息闭环 -->
                    <el-form-item label="执照类型">
                        <div class="select_region">
                            <el-select :value="i_data.licenseType" placeholder="请选择执照类型" clearable
                                class="content_select" disabled><el-option v-for="item in license_type_options"
                                    :key="item.value" :label="item.label" :value="item.value" />
                            </el-select>
                        </div>
                    </el-form-item>
                    <div class="select_region" v-if="false">
                        <el-form-item label="执照号码">
                            <el-input placeholder="请输入单位执照号码" class="content_input" disabled
                                :value="i_data.licenseNumber" />
                        </el-form-item>
                    </div>
                    <div class="select_region">
                        <!-- 查询上级 -->
                        <el-form-item label="上级管理单位">
                            <div class="el_form_content_text">
                                <div class="content_text_relation">
                                    <!-- <p>{{p_data.unit}}</p> -->
                                </div>
                                <div class="content_text_relation">
                                    <span class="content_text_contacts">联系人: </span><i></i>
                                    <span>{{ p_data.name }}</span>
                                </div>
                                <div class="content_text_relation">
                                    <span class="content_text_contacts">联系邮箱: </span><i></i>
                                    <span>{{ p_data.email }}</span>
                                </div>
                                <div class="content_text_relation">
                                    <span class="content_text_contacts">联系电话: </span><span>{{ p_data.phone }}</span>
                                </div>
                            </div>
                        </el-form-item>
                    </div>
                </el-form>
            </el-col>
            <!-- 联系方式 -->
            <el-col :span="24">
                <h3 class="contnet_text">学校负责人信息</h3>
                <el-form label-width="100px" :model="i_data" :rules="head_data_rules" ref="head_data_ref">
                    <el-form-item label="负责人姓名">
                        <el-input placeholder="请输入负责人姓名" class="content_input" disabled :value="i_data.headName" />
                    </el-form-item>

                    <el-form-item label="手机号码">
                        <el-input placeholder="请输入单位负责人手机号码" class="content_input" disabled :value="i_data.headPhone" />
                    </el-form-item>

                    <el-form-item label="联系邮箱" prop="headEmail">
                        <el-input placeholder="请输入单位负责人联系邮箱" class="content_input" :disabled="i_data.auditStatus == 0"
                            v-model="i_data.headEmail" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" size="large" @click="handleSaveInformationForInstitution"
                            v-if="i_data.auditStatus == 2" color="#1964d6">重新提交</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" size="large" @click="handleSaveInformationForInstitution"
                            v-if="i_data.auditStatus == 1" color="#1964d6">保存信息</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
import { ref, onMounted } from "vue"; // 导入Vue的响应式引用和生命周期钩子
import { useUserStore } from "@/store/user"; // 导入用户状态管理
import { getManagerApi } from "@/api/common"; // 导入获取管理者信息的API函数
import ProvinceSelect from "@/components/province-select/index.vue"; // 导入省份选择组件
import { SaveInformationForInstitutionApi } from "@/api/manage/institution"; // 导入保存机构信息的API函数
import { ElMessage } from "element-plus"; // 导入Element Plus的消息提示组件

// 定义学校性质的选项
const type_data = [
    {
        label: "学校",
        value: "school",
    },
    {
        label: "机构",
        value: "institution",
    },
    {
        label: "团队",
        value: "team",
    },
    {
        label: "其他",
        value: "other",
    },
];
const license_type_options = [
    {
        label: "团队",
        value: "team",
    },
    {
        label: "其他",
        value: "other",
    },
];
const userStore = useUserStore(); // 使用用户状态管理
// 定义存储上级管理单位信息的响应式引用
const p_data = ref({});
// 定义存储机构信息的响应式引用
const i_data = ref({});
/**
 * 获取管理者信息的函数
 * @returns {Promise<void>}
 */
const handleGetManager = async () => {
    if (!userStore.info_data) {
        return;
    }
    let res = await getManagerApi(userStore.info_data.p_id);
    if (res.success) {
        p_data.value = res.entity;
    }
    i_data.value = JSON.parse(JSON.stringify(userStore.info_data));
};

/**
 * 保存机构信息的函数
 * @returns {Promise<void>}
 */
const handleSaveInformationForInstitution = async () => {
    // 表单验证
    i_data_ref.value.validate(async (v) => {
        if (!v) {
            return;
        }
        head_data_ref.value.validate(async (v2) => {
            if (!v2) {
                return;
            }
            let res = await SaveInformationForInstitutionApi({
                userId: i_data.value.userId,
                name: i_data.value.name,
                economize: i_data.value.economize,
                market: i_data.value.market,
                county: i_data.value.county,
                address: i_data.value.address,
                headEmail: i_data.value.headEmail,
            });
            if (res.success) {
                ElMessage.success(res.message);
                if (i_data.value.auditStatus == 2) {
                    i_data.value.auditStatus = 0;
                }
            } else {
                ElMessage.error(res.message);
            }
        });
    });
};

// 定义表单验证规则
const i_data_ref = ref();
const i_data_rules = ref({
    name: [
        {
            type: "string",
            required: true,
            message: "请输入单位名称",
            trigger: "blur",
        },
    ],
    county: [
        {
            required: true,
            message: "请选择所在地区",
            trigger: "blur",
        },
    ],
    address: [
        {
            type: "string",
            required: true,
            message: "请输入地址",
            trigger: "blur",
        },
    ],
});

const head_data_ref = ref();
const head_data_rules = ref({
    headEmail: [
        {
            type: "string",
            required: true,
            message: "请输入联系邮箱",
            trigger: "blur",
        },
        {
            validator: (rule, value, callback) => {
                // 使用正则表达式验证邮箱格式
                const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
                if (emailPattern.test(value)) {
                    // 邮箱格式合法，通过校验
                    callback();
                } else {
                    // 邮箱格式不合法，校验失败，显示提示信息
                    callback(new Error("联系邮箱格式不正确"));
                }
            },
            trigger: "blur",
        },
    ],
});
// 组件挂载后执行的操作
onMounted(async () => {
    await userStore.handleGetInformation();
    handleGetManager();
});
</script>
<style lang="scss" scoped>
.header_information {
    .header_name {
        margin-left: 10px;
        margin-right: 10px;

        .header_text {
            margin-left: -10px;
            margin-right: -10px;
        }

        h1 {
            font-size: 28px;
        }
    }

    .el_alert {
        margin-bottom: 20px;
    }

    .header_line {
        display: block;
        height: 1px;
        width: 100%;
        margin: 24px 0;
        background-color: #8473f717;
    }

    .contnet_text {
        margin-bottom: 14px;
        font-size: 20px;
        font-weight: 700;
    }

    .not_inp {
        color: #606266;
        font-size: 14px;
    }

    .content_input {
        width: 500px;
    }

    .input_border {
        display: none;
    }

    :deep(.el-input__wrapper) {
        padding: 0 15px;
    }

    :deep(.el-input.is-disabled) .el-input__inner {
        background-color: #f5f5f5;
    }

    .select_region {
        width: 500px;
        display: flex;
        justify-content: space-between;

        .el_form_content_text {
            width: 500px;
            height: 120px;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;

            p {
                font-size: 14px;
                color: #202020;
            }

            .content_text_relation {
                font-size: 14px;

                .content_text_contacts {
                    color: #000;
                    font-weight: bold;
                }

                span {
                    color: #202020;
                    font-size: 14px;
                }
            }
        }
    }

    :deep(.el-input) {
        height: 40px;
    }

    .content_select {
        width: 160px;
    }

    :deep .el-space__item {
        flex: 1;
    }
}
</style>